<template>
  <div class="form_item-custom_object">
    <ul style="width: 100%">
      <li class="flex" v-for="(v,k) in this_value">
        <el-tag @close="del_row(k)" :closable="!is_info" >
          {{k}}：{{v}}
        </el-tag>
        <template v-if="!is_info">
          <input type="hidden" :name="name+'['+k+']'" :value="v">
        </template>
      </li>
    </ul>

    <div class="flex" v-if="!is_info">
      <div class="">
        <el-input v-model="param_row.name" style="width: 140px" placeholder="输入参数名" />
      </div>
      <div class="max">
        <s94_param :type="value_type" v-model:value="param_row.value" name="" :config="config"  v-bind="$attrs"></s94_param>
      </div>
      <div>
        <el-button type="primary" @click="add_row">添加参数</el-button>
      </div>
    </div>

  </div>
</template>

<script>
import S94_param from "@/components/s94_param.vue";
import {msg} from "@/js/tool.js";

export default {
  _title_: '自定义对象',
  _can_config_: true,
  _can_form_param_: true,
  name: "custom_object",
  components: {S94_param},
  props: ['name', 'value', 'config', 'is_info', 'btn_text', 'size', 'is_list'],
  emits: ['update:value', 'change'],
  data(){
    return {
      need_display: true,
      this_value: this.decode_value(),
      value_type: 'text_one',
      param_row: {name: "", value: ""},
    }
  },
  methods: {
    decode_value(){
      let res = typeof this.value === "object" ? this.value : {};
      return Object.assign({}, res);
    },
    add_row(){
      let k = this.param_row.name;
      let v = this.param_row.value;
      if (!k) return msg.error("参数名不能为空");
      if (k in this.this_value){
        msg.warning('参数名已存在，覆盖值成功')
      }else {
        msg.success('添加成功')
      }
      this.this_value[k] = v;
      console.log(this.this_value);
      this.update_value(this.this_value);
    },
    update_value(v){
      this.need_display = false;
      setTimeout(()=>{this.need_display = true;},5);
      this.$emit('update:value', v);
      this.$emit('change', v);
    },
    del_row(k){
      delete this.this_value[k];
      this.update_value(this.this_value);
    }
  },
  watch: {
    value(){
      if (!this.need_display) return;
      this.this_value = this.decode_value();
    }
  },
  computed: {
  },
  mounted() {

  }
}
</script>

<style scoped>

</style>